<template>
    <el-card class="login-comp-content">
        <div class="div-logo">
            <img class="img-logo" src="../assets/logo.png"/>
        </div>
        <el-input class="input-name" v-model="user.userName" placeholder="用户名"></el-input>
        <el-input class="input-password" v-model="user.password" placeholder="密码" show-password></el-input>
        <div class="verify-div">
            <el-input class="input-verify-code" v-model="user.checkCode" placeholder="验证码" maxlength="4"></el-input>
            <el-image class="el-image-verify-code" :src="verifyCodeBase64" @click="getVerifyCode"></el-image>
        </div>
        <el-button class="button-login" type="primary" :loading="isLoading" @click="enter">登录</el-button>
    </el-card>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                isLoading: false,
                user: {
                    userName: '',
                    password: '',
                    checkCode:'',
                    checkKey:''
                },
                verifyCodeBase64: ''
            }
        },
        mounted() {
            this.getVerifyCode()
        },
        methods: {
            enter() {
                if (this.user.userName===''){
                    this.$Toast.errorToast('用户名不能为空!')
                    return;
                }
                if (this.user.password===''){
                    this.$Toast.errorToast('密码不能为空!')
                    return;
                }
                if (this.user.checkCode===''){
                    this.$Toast.errorToast('验证码不能为空!')
                    return;
                }
                this.isLoading = true
                this.$emit('ALogin',this.user,this.isLoading)
            },
            getVerifyCode() {
                setTimeout(() => {
                    axios.get('/api/getCheckCode')
                        .then((res) => {
                            if (res.data.code === 1) {
                                this.verifyCodeBase64 = res.data.data.base64
                                this.user.checkKey=res.data.checkKey
                            } else {
                                this.verifyCodeBase64=''
                            }
                        })
                        .catch((error) => {
                            this.verifyCodeBase64=''
                        })
                })
            }
        }
    }
</script>

<style scoped>
    .login-comp-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 300px;
        height: auto;
    }

    .div-logo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 20px;
    }

    .img-logo {
        width: 100px;
        height: 100px;
    }

    .input-name {
        margin-top: 20px;
    }

    .input-password {
        margin-top: 20px;
    }

    .button-login {
        margin-top: 20px;
        width: 100%;
        margin-bottom: 20px;
    }

    .verify-div {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .input-verify-code {
        width: 70%;
        height: 100%;
    }

    .el-image-verify-code {
        width: 30%;
        height: 100%;
    }
</style>